<template>
  <div class="my">
    <!-- <Top :searchShow="searchShow">
      <div @click="go"><span class="iconfont icon-31shouye"></span></div>
    </Top> -->
    <div class="content2">
      <div class="login">
         <router-link to="/login" v-if="!userInfo.nickName">
            <span class="loginbtn" >登录 / 注册</span>
         </router-link>
         <div  v-else class="touxiang" >
           <img :src="imgUrl" alt="">
           <div>{{userInfo.nickName}}</div>

         </div>
         
        
      </div>
      <div class="list">个人中心</div>
      <div class="list2" v-for="(item,index) in list" :key='index' @click="listEvent(item)">
        <div class="left">
          <span :class="`iconfont `+item.icon+``"></span>
          <span>{{item.name}}</span>
        </div>
        <div class="right">
          <span class="iconfont icon-31fanhui1"></span>
        </div>
      </div>
    </div>
    <tarbar class="bottom"></tarbar>
  </div>
</template>

<script>
import Top from "@/components/search/searchTop";
import tarbar from "../components/common/tarbar";
import {mapState,mapMutations} from 'vuex'
export default {
  data() {
    return {
      imgUrl:require('@/assets/userInfo/touxiang.png'),
      searchShow: false,
      list:[
        {
          name:'地址管理',
          icon:'icon-dizhiguanli',
        },
        {
          name:'退出登录',
          icon:'icon-dizhiguanli',
        }
      ]
    };
  },
  methods: {
    ...mapMutations(['outLogin']),
    go() {
      this.$router.push({ path: "/" });
    },
    listEvent(item){
      // 退出登录
      item.name=='退出登录'?this.outLogin():''
      item.name=='地址管理'?this.$router.push({name:'pathMessage',params:{type:'my'}}):''

    }
  },
  components: {
    tarbar,
    Top,
  },
  computed:{
    ...mapState({
      userInfo:state=>state.user.userInfo
    })
  },
  mounted(){
    

    
  }
};
</script>

<style lang='scss' scoped>

.list {
  background-color: white;

  height: 1.0732rem;
  color: #9e9e9e;
  font-size: 0.3415rem;
  line-height: 1.0732rem;
  padding: 0 0.2927rem;
  border-bottom: 1px solid #e3e5e9;
}
.list2 {
  display: flex;
  background-color: white;
  width: 100%;
  height: 1.2732rem;
  color: #333;
  font-size: 0.3415rem;
  line-height: 1.0732rem;
  box-sizing: border-box;
  padding: 2vw;
  border-bottom: 1px solid #e3e5e9;
  justify-content: space-between;
  align-items: center;
  .left {
    display: flex;
    align-items: center;
    .iconfont {
      font-size: 5vw;
      margin-right: 2vw;
    }
  }
  .right {
    transform: rotate(180deg);
    .iconfont {
      font-size: 5vw;
    }
  }
}
.login {
  width: 100%;
  height: 4.6341rem;
  background-color: #b0352f;
  position: relative;
  

  .loginbtn {
    display: inline-block;
    font-size: 0.439rem;
    position: absolute;
    top: 50%;
    left: 50%;
    color: white;
    background: rgba(255, 181, 0, 0.9);
    padding: 2vw 4vw;
    border-radius:1vw ;
    transform: translate(-50%,-50%);
  }
  .touxiang{
    color: white;
    font-size: 0.5854rem;
    text-align: center;
    padding-top:1.0732rem ;
    img{
      border: 2px solid white;
      border-radius:99px ;
      width: 15vw;
      height: 15vw;
    }

  }
  
}
.bottom {
  position: fixed;
  bottom: 0;
  left: 0;
}

.iconfont {
  font-size: 0.6829rem;
}
::v-deep .text[data-v-a2db6814] {
  text-align: right;
  margin-right: 4vw;
}
</style>